<template>
	<view>
		<view style="position: relative;">
			<!-- <image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230613/948cd824bcf2544e8a1c598a2ad8eb2f.png" style="width: 100%;" mode="widthFix"></image> -->
		<timeLimit/>
		<memberAdvantageTItle/>
		<memberAdvantage/>
		<view v-if="pingguo_xian" class="pt20">
			<view v-if="status==1" style="width: 100%;height: auto;box-sizing: border-box;padding:30rpx;background-color: #FFFFFF;border-radius: 20rpx;position: absolute;left:0 ;top:980rpx ;">
				<view style="width: 100%;">
					<view @click="dianji(index)" v-for="(item,index) in list" :key='index' :class="type==index?'active':'a'" style="width: 100%;border-radius: 20rpx;box-sizing: border-box;padding: 30rpx;position: relative;overflow: hidden;margin-bottom: 20rpx;">
						<image v-if="type==index" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220429/a50f82879bd4befbddcee45d0fdffe64.png" style="width: 34rpx;position: absolute;top: -4rpx;right: -4rpx;" mode="widthFix"></image>
						<view style="width: 14%;float: left;">
							<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com//uploads/20220711/7a583ac6465b7ee8994416d7e84c3aa4.png" style="width:60rpx;height: 80rpx;display: block;" mode=""></image>
						</view>
						<view style="width: 40%;float: left;color: #000000;font-size: 30rpx;line-height: 80rpx;font-weight: 600;">
							{{item.name || ''}}
						</view>
						<view style="width: 46%;float: left;text-align: center;">
							<view style="line-height: 40rpx;color: #FE5439;">
								<text style="font-size: 26rpx;">￥</text><text style="font-size: 36rpx;font-weight: 600;">{{item.money}}</text>
							</view>
							<text style="line-height: 30rpx;background: #FFF0D8;border-radius: 10rpx;color: #A15210;font-size: 22rpx;display: inline-block;padding: 0 20rpx;">
								原价：{{item.old_money}}
							</text>
						</view>
					</view>
				</view>

				<view v-if="pingguo_xian" @click="kaitong" style="width: 90%;margin: 60rpx auto 30rpx;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 45rpx;background-color: #1fb0ac;color: #FFFFFF;font-size: 28rpx;">
					立即续费
				</view>
				<view v-if="pingguo_xian" class="moren">
					<label @click="ismoren">
						<checkbox :checked="default1==1?true:false" style="transform:scale(0.7);color: #1fb0ac;" /><text>阅读并同意</text>
					</label>
					<text @click="rzxz" style="color: #1fb0ac;opacity: 0.5;">⟪会员须知⟫</text>
				</view>
			</view>
			<view v-if="status==2" style="width: 100%;height: auto;box-sizing: border-box;padding:30rpx;background-color: #FFFFFF;border-radius: 20rpx;position: absolute;left:0 ;top:780rpx ;">
				<view style="width: 100%;">
					<view @click="dianji(index)" v-for="(item,index) in list" :key='index' :class="type==index?'active':'a'" style="width: 100%;border-radius: 20rpx;box-sizing: border-box;padding: 30rpx;position: relative;overflow: hidden;margin-bottom: 20rpx;">
						<!-- <view style="line-height: 60rpx;color: #000000;font-size: 36rpx;text-align: center;">
							VIP
						</view> -->
						<image v-if="type==index" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220429/a50f82879bd4befbddcee45d0fdffe64.png" style="width: 34rpx;position: absolute;top: -4rpx;right: -4rpx;" mode="widthFix"></image>
						<!-- <view style="line-height: 80rpx;color: #FE5439;text-align: center;">
							<text style="font-size: 26rpx;">￥</text>
							<text style="font-size: 48rpx;font-weight: 600;">{{item.money}}</text>
						</view>
						<view style="width: 128rpx;height: 44rpx;line-height: 44rpx;text-align: center;background: #FFF0D8;border-radius: 10rpx;text-align: center;color: #A15210;font-size: 22rpx;margin: 10rpx auto;">
							{{item.name}}
						</view> -->
						<view style="width: 14%;float: left;">
							<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com//uploads/20220711/7a583ac6465b7ee8994416d7e84c3aa4.png" style="width:60rpx;height: 80rpx;display: block;" mode=""></image>
						</view>
						<view style="width: 40%;float: left;color: #000000;font-size: 30rpx;line-height: 80rpx;font-weight: 600;">
							{{item.name || ''}}
						</view>
						<view style="width: 46%;float: left;text-align: center;">
							<view style="line-height: 40rpx;color: #FE5439;">
								<text style="font-size: 26rpx;">￥</text><text style="font-size: 36rpx;font-weight: 600;">{{item.money}}</text>
							</view>
							<text style="line-height: 30rpx;background: #FFF0D8;border-radius: 10rpx;color: #A15210;font-size: 22rpx;display: inline-block;padding: 0 20rpx;">
								原价：{{item.old_money}}
							</text>
						</view>
					</view>
				</view>

				<view v-if="pingguo_xian" @click="kaitong" style="width: 90%;margin: 60rpx auto 30rpx;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 45rpx;background-color: #1fb0ac;color: #FFFFFF;font-size: 28rpx;">
					立即续费
				</view>
				<view v-if="pingguo_xian" class="moren">
					<label @click="ismoren">
						<checkbox :checked="default1==1?true:false" style="transform:scale(0.7);color: #1fb0ac;" /><text>阅读并同意</text>
					</label>
					<text @click="rzxz" style="color: #1fb0ac;opacity: 0.5;">⟪会员须知⟫</text>
				</view>
			</view>
			</view>
		</view>
		<uni-popup id="popup" ref="popup" :type="type_a" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx;border-radius: 20upx;width: 500rpx;">
				<view style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					会员须知
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;margin-bottom: 20rpx;">
					<view style="line-height: 50rpx;color: #606266;font-size: 24rpx;" v-html="rule">

					</view>
				</scroll-view>
				<view @click="guan" style="width: 100%;height: 80rpx;line-height: 80rpx;background-color: #1fb0ac;border-radius: 40rpx;color: #FFFFFF;font-size: 30rpx;text-align: center;">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import timeLimit from '../components/member/timeLimit.vue'
import memberAdvantageTItle from '../components/member/memberAdvantageTItle.vue'
import memberAdvantage from '../components/member/memberAdvantage.vue'
	export default{
		components:{
			timeLimit,
			memberAdvantageTItle,
			memberAdvantage
		},
		data(){
			return{
				status:2,
				default1:1,
				list:[],
				type:0,
				type_a:'center',
				quanyi1:'',
				quanyi2:'',
				rule:'',
				pingguo_xian:false,
			}
		},
		onLoad() {
			this.huiyuan1()
			this.huiyuan2()
			this.vip()
			this.qiandao()
			this.pingguo()
		},
		methods:{
			qiandao: function() {
				this.post('api/index/site', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.rule = res.data.hyxy
					}
				})
			},
			// 会员权益
			huiyuan1:function(){
				this.post('api/client/interests',{type:1},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.quanyi1=res.data
					}
				})
			},
			huiyuan2:function(){
				this.post('api/client/interests',{type:2},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.quanyi2=res.data
					}
				})
			},
			dibu:function(index){
				this.status=index

			},
			ismoren(){
				if(this.default1==0){
					this.default1=1
				}else{
					this.default1=0
				}
			},
			// 会员价格
			vip:function(){
				this.post('api/client/vip_list','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.list=res.data
					}
				})
			},
			dianji:function(index){
				this.type=index
			},
			guan:function(){
				this.$refs.popup.close()
			},
			rzxz:function(){
				uni.navigateTo({
					url:'/subpages/pages/rzxz?type='+2
				})
				return
				this.$refs.popup.open()
			},
			kaitong:function(){
				let that=this
				if(this.default1!=1){
					uni.showToast({
					    title: '请阅读并同意协议',
					    duration: 1000,
						icon:'none'
					});
					return
				}else{
					this.post('api/pay/vip_pay',{id:this.list[this.type].id},true).then(ress=>{
						console.log(ress)
						if(ress.code==1){
							uni.getSystemInfo({
							    success: function (res) {
									let str = res.model
									console.log(str.indexOf("iPhone") != -1); // true
									that.post('api/index/wechat_check','',true).then(re=>{
										if(str.indexOf("iPhone") != -1){
											if(re.data==1){
												that.fukuan(ress)
											}else{
												uni.showModal({
												    title: '温馨提示',
												    content: '由于相关规范，ios功能暂不可用！',
												    success: function (res) {
												        if (res.confirm) {

												        } else if (res.cancel) {

												        }
												    }
												});

											}
										}else{
											that.fukuan(ress)
										}
									})

							    }
							});

						}else{
							uni.showModal({
							    title: '温馨提示',
							    content: ress.msg,
							    success: function (res) {
							        if (res.confirm) {

							        } else if (res.cancel) {

							        }
							    }
							});
						}
					})
				}

			},
			pingguo:function(){
				let that=this
				uni.getSystemInfo({
					    success: function (res) {
							let str = res.model
							console.log(str.indexOf("iPhone") != -1); // true
							that.post('api/index/wechat_check','',true).then(re=>{
								if(re.data==1){
									that.pingguo_xian=true
								}else{
									that.pingguo_xian=false
								}
								// if(str.indexOf("iPhone") != -1){
								// 	if(re.data==1){
								// 		that.pingguo_xian=true
								// 	}else{
								// 		that.pingguo_xian=false
								// 	}
								// }else{
								// 	that.pingguo_xian=true
								// }
							})

					    }
					});
			},
			fukuan:function(res){
				let that=this
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: res.data.timeStamp,
				    nonceStr: res.data.nonceStr,
				    package: res.data.package,
				    signType: res.data.signType,
				    paySign: res.data.paySign,
				    success: function (res) {
				      uni.showToast({
				      	title: '支付成功',
				      	icon: "none",
				      	duration: 1000
				      })
					  setTimeout(function(){
					  		uni.switchTab({
					  			url:'/pages/index/wode'
					  		})
					  },1500)
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							title: '支付取消',
							icon: "none",
							duration: 1000
						})
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #323137 !important;
		padding-bottom: 50rpx;
		font-family: Demibold;
	}
	.t_active{
		color: #FEFEFE;
		font-size: 36rpx;
		font-weight: 600;
		opacity: 1;
	}
	.t_ac{
		color: #FEFEFE;
		font-size: 36rpx;
		font-weight: 600;
		opacity: 0.5;
	}

	.a{
		border: 4rpx solid #D7DBE4;
	}
	.active{
		border: 4rpx solid #0078FF;
	}
	.box>view{
		margin: 16rpx 0;
	}
	.box>view:nth-child(3n+2){
		margin: 16rpx 5%;
	}
	.moren{
		// display: flex;
		height: 120upx;
		padding: 0 30upx;
		text-align: center;
		text{
			font-size: 26upx;
			color: #666666;
		}

	}
	checkbox .wx-checkbox-input {
		// border-radius: 50%;
		/* 圆角 */
		width: 34rpx;
		/* 背景的宽 */
		height: 34rpx;
		/* 背景的高 */
	}

	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 2rpx solid #1fb0ac;
		background: #1fb0ac;
	}

	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		width: 46rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 46rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 46rpx;
		text-align: center;
		font-size: 30rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
</style>
